<template>
<div class="office-supplies">
    <back-button></back-button>
    <!-- 表单标题 -->
    <h1>资产调拨</h1>

    <!-- 创建人及时间信息 -->
    <p class="info">创建人：{{ creator }} &emsp; 创建时间：{{ formatDateTime(formData.created) }}</p>

    <!-- 表单标签页 -->
    <el-tabs v-model="activeTab" type="card" class="custom-tabs" @tab-click="handleTabClick">
        <el-tab-pane label="基础信息" name="basicInfo">
            <!-- 基础信息的内容 -->
            <!-- 表格区域 -->
            <el-form :model="formData" label-width="80px" disabled>
                <!-- 基础信息 -->
                <el-form-item label="标题">
                    <el-input v-model="formData.title"></el-input>
                </el-form-item>
                <el-form-item label="申请单号">
                    <el-input v-model="formData.applicationNum"></el-input>
                </el-form-item>
                <el-form-item label="申请日期">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.applicationDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="申请人">
                    <el-input v-model="applicant"></el-input>
                </el-form-item>
                <el-form-item label="调出日期">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.outDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="调入日期">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.intoDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="调出部门">
                    <el-input v-model="outDepart"></el-input>
                </el-form-item>
                <el-form-item label="调入部门">
                    <el-input v-model="intoDepart"></el-input>
                </el-form-item>
                <el-form-item label="调拨说明">
                    <el-input type="textarea" v-model="formData.allocateDesc"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="formData.remark"></el-input>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="资产明细" name="assetDetails">
            <!-- 资产明细的内容 -->
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
                <el-table-column prop="assetName" label="资产名称" width="180"></el-table-column>
                <el-table-column prop="number" label="资产编码" width="180"></el-table-column>
                <el-table-column prop="model" label="规格型号" width="180"></el-table-column>
                <el-table-column prop="kind" label="资产分类"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="originAdmin" label="原管理人"></el-table-column>
                <el-table-column prop="nowAdmin" label="现管理人"></el-table-column>
                <el-table-column prop="originUser" label="原使用人"></el-table-column>
                <el-table-column prop="nowUser" label="现使用人"></el-table-column>
                <el-table-column prop="nowLocation" label="原存放位置" width="120"></el-table-column>
                <el-table-column prop="targetLocation" label="调拨存放位置" width="120"></el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[7, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane label="附件信息" name="attachmentInfo">
            <!-- 附件信息的内容 -->
        </el-tab-pane>
    </el-tabs>
</div>
</template>

    
<script>
import assetAllocateApi from '@/api/asset-allocate';
import userService from '@/api/user';
import {
    parseTime
} from '@/utils';

import backButton from '@/components/BackButton/backButton.vue';
import departmentService from '@/api/depart';

export default {
    components: {
        backButton
    },
    comments: {
        backButton
    },
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            activeTab: 'basicInfo', // 默认激活第一个标签页
            applicant: '',
            outDepart: '',
            intoDepart: '',
            creator: '',
            formData: {
                title: '',
                applicationNum: '',
                applicationDate: '',
                applicantId: '',
                outDate: '',
                intoDate: '',
                outDeptId: '',
                intoDeptId: '',
                allocateDesc: '',
                remark: '',
                creatorId: '',
                created: '',
            }
        };
    },
    created() {
        this.fetchAllocates()
            .then(() => {
                this.fetchApplicant()
                this.fetchOutDepart()
                this.fetchIntoDepart()
                this.fetchCreator()
            })
            .catch(error => {
                console.error("Error in created hook:", error);
            });
    },
    methods: {
        indexMethod(index) {
            return (index + 1) + (this.currentPage - 1) * this.pageSize; // 返回从1开始的索引
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize
        },
        handleSelectionChange(selection) {

        },
        handleCurrentChange(newPage) {
            this.currentPage = newPage
            this.fetchAssets()
        },
        async fetchAllocates() {
            try {
                const response = await assetAllocateApi.findByNum(this.$route.query.applicationNum);
                this.formData = {
                    ...response.data,
                    applicationDate: this.formatDate(response.data.applicationDate),
                    collectionDate: this.formatDate(response.data.collectionDate)
                };
            } catch (error) {
                return console.log(error);
            }
        },
        fetchAssets() {
            assetAllocateApi.findAllocateFixedDetail({
                    page: this.currentPage,
                    limit: this.pageSize,
                    applicationNum: this.$route.query.applicationNum
                })
                .then(response => {
                    this.tableData = response.data
                    this.total = response.count
                })
                .catch(error => console.log(error))
        },
        fetchApplicant() {
            userService.find(this.formData.applicantId)
                .then(response => this.applicant = response.data.name)
                .catch(error => console.log(error))
        },
        fetchOutDepart() {
            departmentService.find(this.formData.outDeptId)
                .then(response => this.outDepart = response.data.name)
                .catch(error => console.log(error))
        },
        fetchIntoDepart() {
            departmentService.find(this.formData.intoDeptId)
                .then(response => this.intoDepart = response.data.name)
                .catch(error => console.log(error))
        },
        fetchCreator() {
            userService.find(this.formData.creatorId)
                .then(response => this.creator = response.data.name)
                .catch(error => console.log(error))
        },
        formatDate(str) {
            return parseTime(str, '{y}-{m}-{d}')
        },
        formatDateTime(str) {
            return parseTime(str, '{y}-{m}-{d} {h}:{i}:{s}')
        },
        handleTabClick(tab) {
            if (tab.name === 'assetDetails') {
                this.fetchAssets();
            }
        }

    }
};
</script>

    
<style scoped>
.office-supplies h1 {
    text-align: center;
}

.info {
    text-align: right;
    margin-top: 10px;
}

.custom-tabs {
    margin-top: 20px;
}
</style>
